<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!-- 对不识别viewport设备优化 -->
    <meta name="HandheldFriendly" content="true">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <title>添加地址 | 商超世界</title>
    <link rel="icon" type="image/x-icon" href="./favicon.ico" />
    <link rel="stylesheet" type="text/css" href="./css/reset.css">
    <script type="text/javascript" src="./js/rem.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/address.css">
    <link rel="stylesheet" href="./css/LArea.css">
</head>

<body>
    <header>
        <a onclick="javascript:window.history.back(-1);return false" class="back">
            <img src="./images/back.png">
        </a>
        添加地址
    </header>
    <!-- 输入地址 -->
    <div class="form">
        <ul>
            <li>
                <span>收货人</span>
                <input type="text" placeholder="请填写收货人姓名" class="name">
            </li>
            <li>
                <span>联系电话</span>
                <input type="tel" placeholder="请填写联系方式" class="phone">
            </li>
            <li>
                <span>所在地区</span>
                <input type="text" placeholder="请选择所在地区" class="area" readonly="" name="input_area">
                <input id="value1" type="hidden" value="20,234,504">
            </li>
            <li>
                <textarea placeholder="填写详细地址" class="detailArea"></textarea>
            </li>
        </ul>
    </div>

    <div class="sub">
        <button>确认</button>
    </div>
</body>
<script src="./js/jquery1.7.2.js"></script>
<script src="./js/jquery.cookie.js"></script>
<script src="./js/areaInfo.js"></script>
<script src="./js/LArea.js"></script>
<script src="./js/address.js"></script>
<script>
    var area1 = new LArea();
    area1.init({
        'trigger': '.area', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
        'valueTo': '#value1', //选择完毕后id属性输出到该位置
        'keys': {
            id: 'id',
            name: 'name'
        }, 
        //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
        'type': 1, //数据源类型
        'data': LAreaData //数据源
    });
    area1.value = [1, 13, 3]; //控制初始位置，注意：该方法并不会影响到input的value
    // var area2 = new LArea();
    // area2.init({
    //     'trigger': '#demo2',
    //     'valueTo': '#value2',
    //     'keys': {
    //         id: 'value',
    //         name: 'text'
    //     },
    //     'type': 2,
    //     'data': [provs_data, citys_data, dists_data]
    // });
</script>
</html>